<template>
  <div class="cssAnimation2" >
    <div class="carousel">
      <div class="items">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item4"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';

@Options({ components: {} })
export default class CssAnimation2 extends Vue {
  public mounted() {

  }
}
</script>

<style lang="postcss" scoped>
.cssAnimation2{
  .carousel{
    position: relative;
    width: 100px;
    height: 100px;
    margin:0 auto;
    background-color: #fff;
    overflow: hidden;
    .items{
      width: 420px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      animation: carouselMove 3s infinite;
      .item{
        position: absolute;
        top: 0;
        left:0;
        width: 100px;
        height: 100px;
        background-color: red;
        &.item2{
         background-color: blue;
         left:100px;
        }
         &.item3{
         background-color: yellow;
         left:200px;

        }
         &.item4{
         background-color: green;
         left:300px;

        }
      }
    }
    @keyframes carouselMove{
      0%{
        left: 0px;
      }
      35%{
        left: -100px;
      }
      70%{
        left: -200px;
      }
      100%{
        left: -300px;
      }
    }
  }
}
</style>
